<template>
  <div class="breadcrumb">
    <a-breadcrumb>
      <a-breadcrumb-item>
        <router-link to="/"><home-outlined /></router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index">
        <router-link v-if="item.url" :to="item.url">{{ item.name }}</router-link>
        <span v-else>{{ item.name }}</span>
      </a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>

<script lang="ts" setup>
import { HomeOutlined } from '@ant-design/icons-vue'

const props = defineProps({
  breadcrumbItems: {
    type: Array as () => Array<{ url: string; name: string }>,
    default: () => [],
  },
})
</script>

<style scoped>
.breadcrumb {
  margin-bottom: 20px;
  font-size: 16px;
}
</style>
